<template>
  <div>
    <el-card class="box-card" v-show="isShow">
      <div slot="header" class="clearfix">
        <span>创建问卷</span>
        <el-button
          style="float: left; padding: 3px 0"
          type="text"
          @click="isShowCreateQuestionnaire"
          >取消</el-button
        >
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="onSubmit"
          >提交</el-button
        >
      </div>
      <el-scrollbar class="scrollbarBox">
        <div class="box">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="问卷名称:">
              <el-input v-model="form.name" style="width: 400px"></el-input>
              <el-button
                type="primary"
                style="float: right"
                @click="isShowdrawer"
                >预览</el-button
              >
            </el-form-item>
            <el-form-item label="问卷说明:">
              <el-input v-model="form.desc"></el-input>
            </el-form-item>
            <div class="list">
              <div v-if="form.questionGroupVOS.length != 0">
                <div
                  class="item"
                  v-for="(item, index) in form.questionGroupVOS"
                  :key="index"
                >
                  <div class="itemTitle">
                    {{ index + 1 }}. (调研对象) + {{ item.name }}
                    <span class="weight">（权重：{{ item.weight }}%）</span>
                    <div style="float: right">
                      <el-tag
                        type="warning"
                        style="
                          margin-right: 10px;
                          cursor: pointer;
                          font-size: 12;
                        "
                        @click="updateCreateTopic(index, item)"
                        ><i class="el-icon-edit"></i> 修改
                      </el-tag>
                      <el-tag
                        type="danger"
                        style="
                          margin-right: 10px;
                          cursor: pointer;
                          font-size: 12;
                        "
                        @click="deleteTopicObj(index)"
                        ><i class="el-icon-delete"></i> 删除
                      </el-tag>
                    </div>
                  </div>
                  <div class="itemObj">
                    是否必填：{{ item.required == 0 ? "必填" : "非必填" }}
                  </div>
                  <div class="itemObj">
                    调研对象：<span
                      v-for="(userinfo, index) in item.userinfoList"
                      :key="index"
                    >
                      {{ userinfo.name }}
                    </span>
                  </div>
                  <div class="itemMain">
                    <div class="itemScore">
                      <div
                        v-for="(score, index) in item.optionName"
                        :key="index"
                      >
                        {{ score }}
                      </div>
                    </div>
                    <div
                      class="itemTip"
                      v-for="(tip, index) in item.questions"
                      :key="index"
                    >
                      <div class="itemMainTitle">
                        {{ tip.name }}
                        <span class="weight">（权重：{{ tip.weight }}%）</span>
                      </div>
                      <div class="itemMainTitleRadio">
                        <div v-for="n in 4" :key="n">
                          <span></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="createItem" @click="isShowCreateTopicFun">
                <span>添加题目</span>
              </div>
            </div>
          </el-form>
        </div>
      </el-scrollbar>
      <ShowCreateTopic
        ref="child"
        @isShowCreateTopicMethod="isShowCreateTopicMethod"
        :isShow="isShowCreateTopic"
        @onSubmitTopic="onSubmitTopic"
        @onSubmitUpdateTopic="onSubmitUpdateTopic"
      />
    </el-card>
    <!-- //抽屉 -->
    <el-drawer
      :withHeader="false"
      :visible.sync="drawer"
      :direction="direction"
      :size="drawerSize"
    >
      <div class="previewBox" v-if="previewQuestionnaireForm">
        <div class="previewTitle">
          {{ previewQuestionnaireForm.name }}
        </div>
        <div class="previewDesc">{{ previewQuestionnaireForm.desc }}</div>
        <div class="previewList">
          <div
            class="previewItem"
            v-for="(item, index) in previewQuestionnaireForm.groups"
            :key="index"
          >
            <div class="previewItemTitle">{{ index + 1 }}、{{ item.name }}</div>
            <div class="previewItemBox">
              <div class="previewItemoptionNameList">
                <div
                  class="previewItemoptionNameItem"
                  v-for="(optionName, index) in item.optionName.split(',')"
                  :key="index"
                >
                  {{ optionName }}
                </div>
              </div>
              <div class="previewItemTwoTipList">
                <div
                  class="previewItemTwoTipItem"
                  v-for="(questions, index) in item.questions"
                  :key="index"
                >
                  <div class="previewItemTwoTipItemTitle">
                    {{ questions.name }}
                  </div>
                  <div class="previewItemTwoTipItemRadio">
                    <div v-for="n in 4" :key="n">
                      <span></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import ShowCreateTopic from "./ShowCreateTopic.vue";
import { $http } from "../../request/service";
export default {
  components: {
    ShowCreateTopic,
  },
  data() {
    return {
      form: {
        name: "", //问卷标题
        desc: "", //填写对象注意事项
        status: 0,
        weight: 0,
        questionGroupVOS: [],
      },
      previewQuestionnaireForm:null,//预览数据
      updateTipObj: null,
      isShowCreateTopic: false, //是否显示添加题
      //抽屉
      drawer: false,
      direction: "rtl",
      drawerSize: 400,
      questionnaireForm: null,//创建问卷提交数据
    };
  },
  props: ["isShow"],
  methods: {
    //显示预览题目
    isShowdrawer() {
      this.previewProcessingForm();
      this.drawer = true;
    },
    //预览处理数据
    previewProcessingForm() {
      let questionnaireForm = {
        type: "A",
        name: "请添写问卷名称",
        desc: "问卷说明",
        status: 0,
        weight: 0,
        groups: [
          {
            name: "",
            optionName: "",
            weight: 0,
            required: 0,
            targetId: null,
            questions: [
              {
                name: "",
                weight: 0,
              },
            ],
          },
        ],
      };
      questionnaireForm.name = this.form.name || questionnaireForm.name;
      questionnaireForm.desc = this.form.desc || questionnaireForm.desc;
      let questionGroupVOS = [];
      this.form.questionGroupVOS.forEach((item) => {
        item.userinfoList.forEach((child) => {
          questionGroupVOS.push({
            name: child.name + item.name,
            optionName: item.optionName.join(),
            weight: item.weight - 0,
            required: item.required,
            targetId: child.id,
            questions: item.questions,
          });
        });
      });
      questionnaireForm.groups = questionGroupVOS;
      this.previewQuestionnaireForm = questionnaireForm;
    },
    //处理生成问卷数据
    processingForm() {
      let questionnaireForm = {
        type: "A",
        name: "请添写问卷名称",
        desc: "问卷说明",
        status: 0,
        weight: 0,
        group: [
          {
            name: "",
            optionName: "",
            weight: 0,
            required: 0,
            target: [],
            surveyId:0,
            group: [
              {
                name: "",
                weight: 0,
              },
            ],
          },
        ],
      };
      questionnaireForm.name = this.form.name || questionnaireForm.name;
      questionnaireForm.desc = this.form.desc || questionnaireForm.desc;
      let questionGroupVOS = [];
      this.form.questionGroupVOS.forEach((item) => {
        let useridList = [];
        item.userinfoList.forEach((child) => {
          useridList.push(child.id);
        });
        questionGroupVOS.push({
          name: item.name,
          weight: item.weight - 0,
          required: item.required,
          optionName: item.optionName.join(),
          group: item.questions,
          target:useridList
        });
      });
      questionnaireForm.group = questionGroupVOS;
      this.questionnaireForm = questionnaireForm;
    },
    //提交题库
    onSubmit() {
      if (!this.form.name) {
        this.$message.warning("请先填写问卷名称！");
        return;
      } else if (!this.form.desc) {
        this.$message.warning("请先填写问卷简述！");
        return;
      } else if (this.form.questionGroupVOS.length == 0) {
        this.$message.warning("请添加问卷题目！");
        return;
      } else {
        let number = 0;
        this.form.questionGroupVOS.forEach((item) => {
          number += parseInt(item.weight);
        });
        if (number != 100) {
          this.$message.warning("所有题目权重总和必须是100！");
          return;
        }
      }
      //处理数据
      this.processingForm();
      this.getSubmitQuestionnaire();
    },
    //提交问卷请求
    getSubmitQuestionnaire() {
      $http.post("/survey", this.questionnaireForm).then((res) => {
        if (res.code !== 200) return this.$message.error(res.message);
        this.$message.success("添加问卷成功");
        this.questionnaireForm = null;
        this.form = {
          name: "", //问卷标题
          desc: "", //填写对象注意事项
          status: 0,
          weight: 0,
          questionGroupVOS: [],
        };
        this.isShowCreateQuestionnaire();
      });
    },
    //获取录入题目值
    onSubmitTopic(value) {
      this.form.questionGroupVOS.push(value);
      this.isShowCreateTopicMethod();
    },
    //修改录入题目值
    onSubmitUpdateTopic(id, item) {
      this.form.questionGroupVOS[id] = item;
      this.isShowCreateTopicMethod();
    },
    //删除录入题目值
    deleteTopicObj(id) {
      this.form.questionGroupVOS.splice(id, 1);
    },
    //关闭创建题库
    isShowCreateQuestionnaire() {
      this.$emit("isShowCreateQuestionnaire");
    },
    //打开添加题目
    isShowCreateTopicFun() {
      this.isShowCreateTopic = true;
    },
    //关闭添加题目
    isShowCreateTopicMethod() {
      this.isShowCreateTopic = false;
    },
    //打开修改题目
    updateCreateTopic(index, item) {
      this.isShowCreateTopicFun(); //打开添加题目
      this.$refs.child.updateChangeTip(index, item);
    },
  },
};
</script>
<style  scoped>
.previewBox {
  width: 100%;
  height: 100vh;
}
.previewBox .previewTitle {
  padding: 0 30px;
  width: 100%;
  line-height: 40px;
  color: #42a8e3;
  font-size: 18px;
}
.previewBox .previewDesc {
  text-align: left;
  padding: 0 10px;
  line-height: 30px;
  color: red;
  font-size: 14px;
  border-bottom: 1px dashed #ccc;
}
.previewItemBox {
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fafafa;
}
.previewList {
  box-sizing: border-box;
  width: 100%;
  text-align: left;
}
.previewList .previewItem {
  margin: 15px 22px;
}
.previewItem .previewItemTitle {
  line-height: 40px;
  font-weight: bold;
}
.previewItemoptionNameList {
  height: 46px;
  background-color: #e5e5e5;
  display: flex;
}
.previewItemoptionNameItem {
  width: 25%;
  line-height: 46px;
  text-align: center;
}
.previewItemTwoTipItemTitle {
  padding: 15px 18px 0;
  font-size: 14px;
}
.previewItemTwoTipItemRadio {
  display: flex;
  height: 40px;
}
.previewItemTwoTipItemRadio > div {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.previewItemTwoTipItemRadio > div > span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ccc;
}
.scrollbarBox {
  height: calc(90vh - 80px);
}
.box-card {
  width: 50vw !important;
  min-width: 700px !important;
  position: fixed;
  height: 90vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 10;
}
.box {
  text-align: left;
}
.box .list {
  width: 100%;
  text-align: left;
  border: 1px solid #ebeef5;
  padding: 10px 20px;
  border-radius: 4px;
  min-height: 300px;
}
.box .list .item {
  padding: 5px 20px;
  border-radius: 4px;
}
.list .item .itemTitle {
  font-size: 16px;
  line-height: 30px;
}
.list .item .itemObj {
  line-height: 30px;
  font-size: 12px;
}
.list .item .itemMain {
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}
.itemMain .itemScore {
  display: flex;
  background-color: #e5e5e5;
}
.itemMain .itemScore > div {
  width: 25%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.itemScore div:first-child {
  border-left: none;
}
.itemMain .itemTip {
  /* padding: 10px 0 5px; */
  padding-top: 5px;
  background: #f7f7f7;
}
.itemMain .itemTip .itemMainTitle {
  padding: 0 20px;
  font-size: 14px;
}
.itemMainTitleRadio {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}
.itemMainTitleRadio > div {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.itemMainTitleRadio > div > span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ccc;
}
.weight {
  font-size: 12px;
  color: red;
}
.box .list .createItem {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 15px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>